<template>
  <div id="app">
    <nav v-show="$route.meta.nav">
      <li><router-link to="/">推荐</router-link></li>
      <li><router-link to="/singer">歌手</router-link></li>
      <li><router-link to="/search">搜索</router-link></li>
      <li><router-link to="/my">我的</router-link></li>
    </nav>

    <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
    <router-view style="margin-bottom: 100px" />
    <!-- </van-pull-refresh> -->

    <audio
      :src="currentSongInfo.url"
      controls
      autoplay
      @durationchange="updateDuration({ dur: $event.target.duration })"
      @timeupdate="updateCurrentTime({ time: $event.target.currentTime })"
      @play="updatePlayingState({ bool: true })"
      @pause="updatePlayingState({ bool: false })"
      ref="audio"
      @ended="next"
    />

    <CustomPlay @update:currentTime="updateAudioCurrentTime" />
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
import CustomPlay from "@/components/toggle/CustomPlay.vue";

export default {
  name: "App",
  computed: {
    ...mapGetters(["currentSongInfo"]),

    ...mapState([
      "currentSong",
      "playing",
      "duration",
      "playlist",
      "currentTime",
      "playMode",
    ]),
  },
  methods: {
    ...mapMutations([
      "updateDuration",
      "updatePlayingState",
      "updateCurrentTime",
      "updateCurrentSong",
      "nextSong",
      "prevSong",
      "playNextSong",
    ]),

    // 更新当前播放时间
    updateAudioCurrentTime(currentTime) {
      const { audio } = this.$refs;
      audio.currentTime = currentTime;
    },

    // 下拉释放，其实并没有什么卵用
    onRefresh() {
      setTimeout(() => {
        this.$toast({
          type: "success",
          position: "middle",
          message: "刷新成功",
        });

        this.isLoading = false;
      }, 1000);
    },

    // 根据播放模式决定接下来要怎么播放
    // 0: 顺序播放, 1: 单曲循环, 2: 随机播放, 3: 列表循环
    next() {
      this.playNextSong();

      // 单曲循环模式下，mutation不改变currentSong，
      if (this.playMode === 1) {
        // 需要手动重置audio播放
        const audio = this.$refs.audio;
        audio.currentTime = 0;
        audio.play();
      }
    },
  },
  components: {
    CustomPlay,
  },

  watch: {
    // TODO逐渐放大、放小声音
    playing(state) {
      const { audio } = this.$refs;
      state ? audio.play() : audio.pause();
    },
  },

  data() {
    return {
      isLoading: false,
    };
  },
};
</script>

<style lang="less">
#app {
  width: 100%;
  --height: 40px;

  .animated {
    animation-duration: 0.8s;
  }

  & > nav {
    width: 100%;
    height: var(--height);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 5;
    display: flex;

    li {
      flex: 1;
      line-height: var(--height);
      list-style: none;
      text-align: center;

      a {
        text-decoration: none;
        color: #000;
        padding-bottom: 5px;

        &.router-link-exact-active {
          color: skyblue;
          font-size: 15px;
          font-weight: bold;
          transition: 0.4s;
          border-bottom: 4px solid skyblue;
        }
      }
    }
  }

  audio {
    position: fixed;
    top: 40px;
    z-index: 2;
    display: none;
  }
}
</style>
